<template>
	<view class="cart-container">
		<!-- 顶部标题栏 -->
		<view class="header">
			<text class="title">购物车</text>
			<view class="message-icon">
				<text class="iconfont">📨</text>
				<view class="badge" v-if="hasNewMessage">1</view>
			</view>
		</view>
		
		<!-- 用户信息 -->
		<view class="user-info">
			<view class="user-left">
				<image class="avatar" src="/static/my.png" mode="aspectFill"></image>
				<view class="user-detail">
					<text class="username">带我去彩虹海</text>
					<view class="user-tag">
						<text class="tag-text">学生认证</text>
						<text class="iconfont verify-icon">✓</text>
					</view>
				</view>
			</view>
			<view class="select-all">
				<checkbox :checked="isAllSelected" @click="toggleSelectAll"></checkbox>
				<text>全选</text>
			</view>
		</view>
		
		<!-- 购物车列表 -->
		<view class="cart-list">
			<view class="cart-item">
				<checkbox class="item-checkbox" :checked="book.selected" @click="toggleSelect(book)"></checkbox>
				<image class="book-cover" src="/static/book1.jpg" mode="aspectFill"></image>
				<view class="book-info">
					<text class="book-title">沉默的大多数</text>
					<text class="book-desc">之前看完一直闲置在家里，最近清理物品希望它找到出路...</text>
					<view class="book-meta">
						<text class="condition">9成新</text>
						<text class="location">辽宁 沈阳</text>
						<text class="shipping">支持自提</text>
					</view>
					<view class="price-info">
						<text class="current-price">¥16</text>
						<text class="original-price">¥22.8</text>
						<text class="buyers">42人想要</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 底部结算栏 -->
		<view class="bottom-bar">
			<view class="total-section">
				<text>合计：</text>
				<text class="total-price">¥ {{totalPrice}}</text>
				<text class="shipping-text">不含运费</text>
			</view>
			<view class="action-buttons">
				<button class="move-btn" @click="moveToWishlist">移入想要</button>
				<button class="delete-btn" @click="deleteItems">删除</button>
				<button class="checkout-btn" @click="checkout">结算 ({{selectedCount}})</button>
			</view>
		</view>
		
		<!-- 底部导航栏 -->
		<view class="tab-bar">
			<view 
				class="tab-item" 
				v-for="(tab, index) in tabs" 
				:key="index"
				@click="handleTabClick(tab)"
				:class="{ active: tab.text === '购物车' }"
			>
				<text class="tab-icon">{{tab.icon}}</text>
				<text class="tab-text">{{tab.text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hasNewMessage: true,
				isAllSelected: false,
				book: {
					selected: false,
					title: '沉默的大多数',
					price: 16,
					originalPrice: 22.8
				},
				tabs: [
					{ icon: '🏛️', text: '主页' },
					{ icon: '📖', text: '卖书' },
					{ icon: '🛒', text: '购物车' },
					{ icon: '👤', text: '我的' }
				]
			}
		},
		computed: {
			totalPrice() {
				return this.book.selected ? this.book.price : 0;
			},
			selectedCount() {
				return this.book.selected ? 1 : 0;
			}
		},
		methods: {
			toggleSelectAll() {
				this.isAllSelected = !this.isAllSelected;
				this.book.selected = this.isAllSelected;
			},
			toggleSelect(book) {
				book.selected = !book.selected;
				this.isAllSelected = book.selected;
			},
			moveToWishlist() {
				if (!this.selectedCount) {
					uni.showToast({
						title: '请选择要移动的商品',
						icon: 'none'
					});
					return;
				}
				uni.showToast({
					title: '已移入想要',
					icon: 'success'
				});
			},
			deleteItems() {
				if (!this.selectedCount) {
					uni.showToast({
						title: '请选择要删除的商品',
						icon: 'none'
					});
					return;
				}
				uni.showModal({
					title: '提示',
					content: '确定要删除选中的商品吗？',
					success: (res) => {
						if (res.confirm) {
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},
			checkout() {
				if (!this.selectedCount) {
					uni.showToast({
						title: '请选择要结算的商品',
						icon: 'none'
					});
					return;
				}
				uni.showToast({
					title: '正在跳转到结算页面',
					icon: 'none'
				});
			},
			handleTabClick(tab) {
				if (tab.text === '主页') {
					uni.switchTab({
						url: '/pages/home/home'
					});
				} else if (tab.text === '卖书') {
					uni.switchTab({
						url: '/pages/sell/sell'
					});
				} else if (tab.text === '我的') {
					uni.switchTab({
						url: '/pages/my/my'
					});
				}
			}
		}
	}
</script>

<style>
	.cart-container {
		min-height: 100vh;
		background-color: #F5F5F5;
		padding-bottom: 180rpx;
	}
	
	.header {
		background-color: #FF6B00;
		height: 180rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 40rpx;
		padding-top: 40rpx;
		border-radius: 0 0 40rpx 40rpx;
	}
	
	.title {
		color: #FFFFFF;
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.message-icon {
		position: relative;
		font-size: 40rpx;
		color: #FFFFFF;
	}
	
	.badge {
		position: absolute;
		top: -10rpx;
		right: -10rpx;
		background-color: #FF0000;
		color: #FFFFFF;
		font-size: 20rpx;
		min-width: 32rpx;
		height: 32rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 6rpx;
	}
	
	.user-info {
		margin: 20rpx;
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	
	.user-left {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}
	
	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
	}
	
	.user-detail {
		display: flex;
		flex-direction: column;
		gap: 6rpx;
	}
	
	.username {
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.user-tag {
		display: inline-flex;
		align-items: center;
		background-color: #FFF6F0;
		padding: 4rpx 12rpx;
		border-radius: 8rpx;
	}
	
	.tag-text {
		font-size: 24rpx;
		color: #FF6B00;
	}
	
	.verify-icon {
		color: #FF6B00;
		font-size: 24rpx;
		margin-left: 4rpx;
	}
	
	.select-all {
		display: flex;
		align-items: center;
		gap: 10rpx;
		font-size: 28rpx;
		color: #666666;
	}
	
	.cart-list {
		margin: 20rpx;
	}
	
	.cart-item {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx;
		display: flex;
		align-items: flex-start;
		gap: 20rpx;
		margin-bottom: 20rpx;
	}
	
	.item-checkbox {
		margin-top: 60rpx;
	}
	
	.book-cover {
		width: 160rpx;
		height: 200rpx;
		border-radius: 8rpx;
	}
	
	.book-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}
	
	.book-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.book-desc {
		font-size: 26rpx;
		color: #999999;
		line-height: 1.4;
	}
	
	.book-meta {
		display: flex;
		gap: 20rpx;
		font-size: 24rpx;
		color: #666666;
	}
	
	.price-info {
		display: flex;
		align-items: center;
		gap: 16rpx;
		margin-top: 10rpx;
	}
	
	.current-price {
		font-size: 36rpx;
		font-weight: bold;
		color: #FF6B00;
	}
	
	.original-price {
		font-size: 24rpx;
		color: #999999;
		text-decoration: line-through;
	}
	
	.buyers {
		font-size: 24rpx;
		color: #999999;
	}
	
	.bottom-bar {
		position: fixed;
		bottom: 100rpx;
		left: 0;
		right: 0;
		background: #FFFFFF;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1rpx solid #EEEEEE;
	}
	
	.total-section {
		display: flex;
		align-items: baseline;
		gap: 10rpx;
	}
	
	.total-price {
		font-size: 36rpx;
		font-weight: bold;
		color: #FF6B00;
	}
	
	.shipping-text {
		font-size: 24rpx;
		color: #999999;
	}
	
	.action-buttons {
		display: flex;
		gap: 20rpx;
	}
	
	.move-btn, .delete-btn, .checkout-btn {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 30rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
	}
	
	.move-btn {
		background: #F5F5F5;
		color: #666666;
	}
	
	.delete-btn {
		background: #FFE7E7;
		color: #FF4444;
	}
	
	.checkout-btn {
		background: #FF6B00;
		color: #FFFFFF;
	}
	
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1rpx solid #EEEEEE;
	}
	
	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6rpx;
	}
	
	.tab-icon {
		font-size: 40rpx;
	}
	
	.tab-text {
		font-size: 24rpx;
		color: #333333;
	}
	
	.tab-item.active .tab-text {
		color: #FF6B00;
	}
</style> 